<template>
  <div>
    <el-dialog
      :visible.sync="dialog"
      :title="dialogTitle"
      :before-close="handleClose"
      width="580px"
    >
      <div>
        <ul class="coincheck">
          <li>
            账户余额 :
            <span>{{ dialogData.amount }}</span> 农商币
          </li>
          <li>
            充值 :
            <span>{{ dialogData.rechargeAmount }}</span> 农商币
          </li>
          <li>
            消费 :
            <span>{{ dialogData.purchaseAmount }}</span> 农商币
          </li>
        </ul>
        <el-table :data="dialogData.tableData" stripe style="width: 100%">
          <el-table-column prop="name" label="名称" min-width="20">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="put" label="充值" min-width="20">
            <template slot-scope="scope">
              <el-button type="text">{{ scope.row.rechargeAmount }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="shop" label="消费" min-width="20">
            <template slot-scope="scope">
              <span>{{ scope.row.purchaseAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="20">
            <template slot-scope="scope">
              <span>{{ scope.row.createTimeTimeStr }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Dialog',
    props: {
      visiabledialog: {
        type: Boolean,
        default: false
      },
      dialogData: {
        type: Object,
        default: () => {
          return {}
        }
      },
      formLabelWidth: {
        type: String,
        default: '120px'
      }
    },
    computed: {
      dialog() {
        return this.visiabledialog
      },
      dialogTitle() {
        return `${this.dialogData.userName}的农商币明细`
      }
    },
    methods: {
      // 向父组件事件changeVisiable和布尔值false 父组件用@changeVisiable接收事件 并触发父组件的一个函数 @changeVisiable="changeVisiable"
      handleClickCancel() {
        this.$emit('change', false)
      },
      handleClose() {
        this.$emit('change', false)
      }
    }
  }
</script>

<style lang="scss">
  .coincheck {
    list-style: none;
    padding: 0;
    padding-left: 11px;
    margin: 0;
    margin-bottom: 21px;
    margin-top: 14px;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    background-color: #f8f8f8;

    li {
      float: left;
      display: block;
      margin-right: 20px;
      color: #72726f;

      span {
        color: rgb(15, 202, 62);
        font-weight: 600;
      }
    }
  }
</style>
